<template>
    <el-dialog title="车辆详情" :visible.sync="showDialog_" custom-class='dialog_right MkCarDetail' top="0%" @close='closeDialog()' @open='openDialog'>
      <div class="operationBtnInRightDialog">
        <!--<span class='editInfoIcon' @click="" ><i class="el-icon-edit"></i> 编辑</span>-->
        <mk-permission :perms="['Ticket:LineManagement:Bus:delete']">
          <span class='infoIcon' @click="deleteCar" ><i class="el-icon-delete"></i> 删除</span>
        </mk-permission>
      </div>
      <el-row :gutter="20">
          <el-col :span = "3" class="textAlignRight fontColorThree">车牌号</el-col>
          <el-col :span = "21" class="fontColorTwo">{{currentCar.plateNumber}}</el-col>
        </el-row>
      <el-row :gutter="20">
        <el-col :span = "3" class="textAlignRight fontColorThree">票数</el-col>
        <el-col :span = "21" class="fontColorTwo">{{currentCar.seatCounts}}</el-col>
      </el-row>
    </el-dialog>
</template>

<script>
import routeService from '../../../services/route'
import MkPermission from "../../../components/MkPermission";
import { mapState } from 'vuex'
export default {
  name: 'MkCarDetail',
  components: {
    MkPermission
  },
  props: ['showDialog','currentCar'],
  computed: mapState({
//    parentId: state => state.orderMgt.typeOneData.id,
  }),
  methods: {
    deleteCar() {
      this.$confirm('此操作将删除该车辆, 是否继续?', '删除', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        customClass: 'confirmBox_warning'
      }).then(() => {
        routeService.deleteCar({id:this.currentCar.id},() => {
            this.$message.success('删除成功');
            this.isRefresh = 'yes';
            this.showDialog_ = false;
        })
      }).catch(()=>{

      });
    },
    closeDialog() {
      this.$emit('closeDialog',this.isRefresh);
    },
    openDialog() {
      this.isRefresh = 'no';
    },
  },
  watch: {
    showDialog: function(value) {
      this.showDialog_ = value;
    }
  },
  data () {
    return {
      isRefresh: 'no',
      showDialog_: this.showDialog,
    }
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang='less'>
  .MkCarDetail{
    .el-row{
      line-height: 40px;
    }
  }
</style>
